<!DOCTYPE html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
	<div class="container-fluid">
		<div class="card">
			<div class="card-body">
				<div id="toolbar" style="width: 70vw;">
					<form class="row" role="form" onsubmit="javascript:return false;">
						<div class="col-md-3">
							<input type="text" class="form-control" name="keyWord" placeholder="请输入搜索内容" />
						</div>
						<div class="col-md-3">
							<button class="btn btn-primary" data-toggle="tableSearch">搜索</button>
							<button type="reset" class="btn btn-default ms-1">重置</button>
						</div>
					</form>
					<div class="mt-2">
						<button class="btn btn-primary me-1" data-handle="add" data-perm="hospital/add" hidden><i class="mdi mdi-plus"></i>
							新增</button>
					</div>
				</div>
				<table id="table"></table>
			</div>
		</div>
	</div>
	<script id="dialog" type="text/html">
		<form class="needs-validation" novalidate  id="dialogForm">
			<input type="text" name="id" hidden>
		  <div class="row mb-3 ">
		    <label for="code" class="col-sm-2 col-form-label text-end required">医院编码</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control " name="code" required>
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="name" class="col-sm-2 col-form-label text-end required">医院名称</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="name" required>
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="regionCode" class="col-sm-2 col-form-label text-end required">地区</label>
		    <div class="col-sm-10">
				<div class="input-group">
					<select class="form-control selectpicker" name="provCode" data-size="10"></select>
					<select class="form-control selectpicker" name="cityCode" data-size="10"></select>
					<select class="form-control selectpicker" name="regionCode" data-size="10" required></select>
				</div>
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="address" class="col-sm-2 col-form-label text-end">地址</label>
		    <div class="col-sm-10">
		      <input type="text" class="form-control" name="address">
		    </div>
		  </div>
		  <div class="row mb-3">
		    <label for="remark" class="col-sm-2 col-form-label text-end">备注</label>
		    <div class="col-sm-10">
		      <textarea class="form-control" name="remark" rows="3"></textarea>
		    </div>
		  </div>
		  <div class="row">
			 <div class="col-md-4 offset-md-8">
				<button type="button" class="btn btn-secondary me-1 " data-bs-dismiss="modal">取消</button>
				<button type="submit" class="btn btn-primary">保存</button>
			</div>
		  </div>
		</form>
	</script>
	<script type="module">
		import admin from "/admin/js/admin.js"
		var layer = admin.getModule("layer");
		var request = admin.getModule("request");
		var button = admin.getModule("button");
		var form = admin.getModule("form");
		var table = admin.getModule("table");

		var dialogHtml = $("#dialog").html();
		var dialogData = {
			handle: '',
			dialog: null,
		};

		var tableInst = table.initTable({
			elem: "#table",
			url: 'hospital/search',// 请求地址
			showColumns: true, //显示所有列
			showPrint:true, //打印
			showExport:true, //导出
			exportOptions:{
				fileName:"医院",
			},
			columns: [{
				field: 'code',
				align: 'center',
				title: '编码',
			}, {
				field: 'name',
				align: 'center',
				title: '医院名称',
			}, {
				field: 'address',
				// 是否可视(默认 - true)
				align: 'center',
				title: '地址'
			}, {
				field: 'remark',
				align: 'center',
				title: '备注'
			}, {
				field: 'createtime',
				align: 'center',
				title: '创建时间'
			}, {
				title: '操作',
				formatter: btnGroup,  // 自定义方法
				events: {
					'click .view-btn': toSight,
					'click .edit-btn': edit,
					'click .del-btn': deleteHandle
				}
			}]
		})

		$('[data-handle="add"]').click(function () {
			add();
		})



		function add() {
			dialogData.handle = "hospital/add";
			dialogData.dialog = layer.dialog("添加医院", dialogHtml);
			dialogEvent();
			initProv();
			initCity();
			initArea();
		}

		function edit(e, value, row, index) {
			dialogData.handle = "hospital/edit";
			dialogData.dialog = layer.dialog("修改医院", dialogHtml);
			dialogEvent();
			$("#dialogForm input[name='code']").attr("disabled", "true")
			form.val("#dialogForm", row)
			var provCode = row.regionCode.substr(0, 2) + '0000';
			var cityCode = row.regionCode.substr(0, 4) + '00';
			initProv(provCode);
			initCity(cityCode, provCode);
			initArea(row.regionCode, cityCode);
		}

		function toSight(row) {
			admin.toPage('view/baseData/hospitalSight.html', '医院风采');
		}

		function deleteHandle(e, value, row, index) {
			layer.confirm("确认删除医院" + row.name, function () {
				request.postAlert("hospital/delete", {id: row.id}).then(res => {
					tableInst.bootstrapTable("refresh");
				})
			})
		}

		function dialogEvent() {
			$("#dialogForm [name='provCode']").change(function () {
				initCity()
				initArea('aaa')
			})
			$("#dialogForm [name='cityCode']").change(function () {
				initArea();
			})
			$("#dialogForm").submit(function () {
				var btn = button.load({elem: "#dialogForm button[type='submit']"});
				if (!form.validate($(this))) {
					btn.stop();
					return false;
				}
				var data = form.val($(this));
				data.roleIds = $("#roleIds").selectpicker('val');
				request.postAlert(dialogData.handle, data).then(res => {
					dialogData.dialog.hide();
					tableInst.bootstrapTable("refresh");
				}).catch(err => {
					btn.stop();
				})
				return false;
			})
		}

		function initProv(data) {
			var $select = $("#dialogForm [name='provCode'");
			var value = '0';
			var html = '';
			$select.selectpicker('destroy');
			request.post('region/listByPCode', {id: value}).then(res => {
				res.data.forEach(item => {
					html += '<option value="' + item.code + '">' + item.name + '</option>'
				})
				$select.html(html);
				$select.val(data);
				$select.selectpicker('render');
			})

		}

		function initCity(data, provCode) {
			var $select = $("#dialogForm [name='cityCode'");
			var value = provCode || form.val("#dialogForm").provCode || 'aaa';
			var html = '';
			$select.selectpicker('destroy');
			request.post('region/listByPCode', {id: value}).then(res => {
				res.data.forEach(item => {
					html += '<option value="' + item.code + '">' + item.name + '</option>'
				})
				$select.html(html);
				$select.val(data);
				$select.selectpicker('render');
			})

		}

		function initArea(data, cityCode) {
			var $select = $("#dialogForm [name='regionCode'");
			var value = cityCode || form.val("#dialogForm").cityCode || 'aaa';;
			var html = '';
			$select.selectpicker('destroy');
			request.post('region/listByPCode', {id: value}).then(res => {
				res.data.forEach(item => {
					html += '<option value="' + item.code + '">' + item.name + '</option>'
				})
				$select.html(html);
				$select.val(data);
				$select.selectpicker('render');
			})

		}

		// 自定义操作按钮
		function btnGroup() {
			let html =
				'<a href="#!" class="btn btn-sm btn-default me-1 view-btn" title="医院风彩"><i class="mdi mdi-camera"></i></a>' +
				'<a href="#!" class="btn btn-sm btn-default me-1 edit-btn"  title="编辑" data-perm="hospital/edit" hidden><i class="mdi mdi-pencil"></i></a>' +
				'<a href="#!" class="btn btn-sm btn-default me-1 del-btn"  title="删除" data-perm="hospital/delete" hidden><i class="mdi mdi-trash-can-outline"></i></a>';
			return html;
		}

	</script>
</body>

</html>